//webpack是基于node构建的，所以webpack所有的文件中
// 任何合法的node代码都是支持的
const path = require('path');
//在内存中根据指定的模板页面生成一份内存中的首页同时将打包好的bundle.js自动注入在页面底部，如果要配置插件需要再导出的对象中挂载一个plugins节点
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//当以命令行的形式运行 webpack 或 webpack-dev-server 的时候，工具会发现我们并没有提供要打包文件的入口和出口文件，此时工具将会检查项目根目录
//的配置文件，并读取这个文件，就拿到了下面导出的配置对象，根据配置对象进行打包和构建
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: 'D:\\coding_space\\web\\project\\dist'
    },
    mode: 'none',
    devServer: {
        port: 9000,
        contentBase: 'src',
        // open: true,
        hot: true,
        host: '192.168.2.103'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},//配置处理.css文件第三方的loader规则
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},//配置处理.less文件第三方的loader规则
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},//配置处理.scss文件第三方的loader规则
            {test: /\.jpg|png|gif|jpeg$/, use: ['url-loader?limit=1300&name=[hash:8]-[name].[ext]']},//配置处理图片路径文件第三方的loader规则
            {test: /\.ttf|eot|svg|woff|woff2$/, use: ['url-loader']},//配置处理字体文件的loader
            {test: /\.js$/, exclude: /(node_modules|bower_components)/, use: ['babel-loader']},//配置处理js文件的第三方规则
            {test: /\.vue$/, use: ['vue-loader']}//配置处理vue文件的第三方规则
        ]
    },
    resolve: {
        alias: {
            // 'vue$': 'vue/dist/vue.min.js'
        }
    }
};